<template>
	<div class="page">
		<Head />
		<div class="mainBody">
			<div class="user routerView">
				<div class="leftMenu">
					<leftAside></leftAside>
				</div>
				<div class="rightView">
					<div class="personalInformation">
						<div class="information">
							<div class="cardWrap">
								<div class="card">
									<div class="cardTitle"><span class="title">Thông tin cá nhân</span>
									</div>
									<div class="cardBody">
										<p class=""><span></span></p>
										<form class="el-form">
											<div class="el-form-item el-form-item--mini">
												<label class="el-form-item__label" style="width: 170px;">Tài khoản</label>
												<div class="el-form-item__content" style="margin-left: 170px;">
													<p class="lh40" style="color: white;">xiaobao</p>
												</div>
											</div>
											<div class="el-form-item el-form-item--mini">
												<label class="el-form-item__label" style="width: 170px;">Họ tên</label>
												<div class="el-form-item__content" style="margin-left: 170px;">
													<p class="lh40">xiaobao</p>
													<button type="button" class="el-button changeBtn ml24 el-button--primary el-button--mini">
														<span>Liên hệ CSKH để thay đổi</span>
													</button>
												</div>
											</div>
										</form>
									</div>
								</div>
								<div class="card">
									<div class="cardTitle"><span class="title">Bảo mật tài khoản</span></div>
									<div class="cardBody">
										<p class=""><span></span></p>
										<form class="el-form">
											<div class="el-form-item el-form-item--mini">
												<label class="el-form-item__label" style="width: 170px;">Mật khẩu đăng nhập</label>
												<div class="el-form-item__content" style="margin-left: 170px;">
													<p class="lh40">******</p>
													<button @click="dialogFormVisible = true" type="button" class="el-button ml24 w124 el-button--primary el-button--mini">
														<span>Thay đổi</span>
													</button>
												</div>
											</div>
											<div class="el-form-item el-form-item--mini">
												<label class="el-form-item__label" style="width: 170px;">Mật khẩu giao dịch</label>
												<div class="el-form-item__content" style="margin-left: 170px;">
													<p class="lh40">******</p>
													<button type="button" @click="dialogFormVisible2 = true" class="el-button ml24 w124 el-button--primary el-button--mini"><span>Thay đổi</span>
													</button>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="bankCard">
								<div class="card">
									<div class="cardTitle"><span class="title">Sốtài khoản</span><span class="accountsNumText">Số lương tài khoản：0/5</span></div>
									<div class="cardBody">
										<div class="cardList">
											<div class="cardItem addBankCard" @click="url('/user/addIn')">
												<i size="16" class="iconfont icon-icon_add_bankcard"></i><span>Thêm vào</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹窗 -->
		<el-dialog title="Thay đổi mật khẩu đăng nhập" :visible.sync="dialogFormVisible" width="400px">
			<el-form :model="form">
				<el-form-item label="Mật khẩu cũ">
					<el-input v-model="form.pwd1" placeholder="Mật khẩu cũ"></el-input>
				</el-form-item>
				<el-form-item label="Mật khẩu mới">
					<el-input v-model="form.pwd2" placeholder="Mật khẩu mới"></el-input>
				</el-form-item>
				<el-form-item label="Nhập lại mật khẩu mới">
					<el-input v-model="form.pwd3" placeholder="Nhập lại mật khẩu mới"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer flexCenter">
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 弹出 -->
		<el-dialog title="Biệt danh" :visible.sync="dialogFormVisible2" width="400px">
			<el-form :model="form">
				<el-form-item label="Mật khẩu cũ">
					<el-input v-model="form.pwd1" placeholder="Mật khẩu cũ"></el-input>
				</el-form-item>
				<el-form-item label="Mật khẩu mới">
					<el-input v-model="form.pwd2" placeholder="Mật khẩu mới"></el-input>
				</el-form-item>
				<el-form-item label="Nhập lại mật khẩu mới">
					<el-input v-model="form.pwd3" placeholder="Nhập lại mật khẩu mới"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer flexCenter">
				<el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Head from '@/components/Head.vue'
	import leftAside from '@/components/aside.vue'
	export default {
		components: {
			Head,
			leftAside
		},
		data() {
			return {
				dialogFormVisible:false,
				dialogFormVisible2:false,
				form: {
					name: 'xiaobao',
				},
			};
		},
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
		}
	}
</script>
